<template>
	<view>
		<custom title="收藏" mode="2" fixed="fixed"></custom>
		<view class="content-box bg-FFFFFF">
			<view class="" style="background-color: #F6F6F6;margin: 0 10rpx;border-radius: 10rpx;">
				<search placeholder="搜索" :value="keyWord" @search="search" @clear="onClear"></search>
			</view>

			<scroll-view class="tags-box" scroll-x="true">
				<view :id="i" v-for="(item, i) in tags" :key="i" class="tag-item fs-26" @tap="searchTag(item)">{{item}}
				</view>
			</scroll-view>

		</view>
		<scroll-view scroll-y style="height: 80vh;" @scrolltolower="onScrollToLower" refresher-enabled
				:refresher-triggered="isRefresh" @refresherrefresh="onscrollRefresh">
			<collectItem v-for="item in collectList" :key="item.id" :info="item" @refresh="init">
			</collectItem>
			<qq-footer :list="collectList" :show="is_null"></qq-footer>
		</scroll-view>
	</view>
</template>

<script>
	import collectItem from "./component/collect-item.vue";
	import {
		timestampToTime
	} from '../../pages/course/utils'
	import api from './api/collect'
	export default {
		components: {
			collectItem
		},
		data() {
			return {
				tags: [],
				collectList: [],
				pageNumber: 1,
				pageSize: 10,
				sourceType: '',
				sourceId: '',
				collectType: [],
				keyWord: '',
				is_null: false,
				isRefresh:false,
			};
		},
		onShow() {

		},
		onLoad() {
			this.getTagList()
			// this.getCollectList()
			this.init()
		},
		computed: {
			historyWidth() {
				return this.tags.reduce((p, c) => {
					return p + c.length * 34 + 40
				}, 0) || 74
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
			this.init();
		},

		methods: {
			// 滑动到底部时加载更多
			onScrollToLower() {
				this.getCollectList(this.pageNumber);
			},
			onscrollRefresh() {
				this.isRefresh = true;
				setTimeout(() => {
					this.init();
					this.isRefresh = false;
				}, 200);
			},
			init() {
				this.setData({
					collectList: [],
					pageNumber: 1,
					is_null: false,
				});
				this.getCollectList();
			},
			// 清除
			onClear() {
				this.keyWord = ''
				this.getCollectList()
			},
			// 搜索
			search(value) {
				this.keyWord = value
				this.getCollectList()
			},
			// 点击标签搜索
			searchTag(item) {
				this.keyWord = item
				this.getCollectList()
			},
			// 获取标签列表
			async getTagList() {
				const {
					data,
					status
				} = await api.getTagList()
				if (status === 200) {
					if (data) {
						this.tags = data.filter(item => item)
					}
				}

			},
			// 获取收藏列表
			async getCollectList(pageNumber = 1) {
				// const { data, status } = await api.getCollectList({ labName: this.labName })
				// if (status === 200) {
				//   if (data) {
				//     this.collectList = data.map(item => {
				//       item.groupName = item.groupName + '群'
				//       item.sendTime = timestampToTime(item.sendTime)
				//       if(item.type === 'VOICE') {
				//         let regex = /\[(.+?)\]/g;
				//         let str_arr = String(item.content).match(regex);
				//         item.content = item.content.replace(str_arr,'')
				//         item.time = str_arr[0].replace('[','').replace(']','')
				//         console.log('content',item.content);
				//       }
				//     })
				//   }
				// }
				if (this.is_null) return;

				this.request({
					url: '/tencentCollect/list',
					loading: true,
					data: {
						pageNumber: pageNumber,
						pageSize: this.pageSize,
						sourceType: this.sourceType,
						sourceId: this.sourceId,
						collectType: this.collectType,
						keyWord: this.keyWord,
					},
					method: 'POST',
					loading: true,
				}).then(res => {
					if (res.status == 200) {
						if (res.data.list.length > 0) {
							const result = res.data.list.map(item => {
								let collectDataObj = null;
								if (item.collectData && item.collectData.trim()) {
									try {
										collectDataObj = JSON.parse(item.collectData);
									} catch (error) {
										console.error('JSON 解析错误:', error.message, '对于 item:', item);
									}
								} else {
									console.warn('无效或空的 collectData 字段', '对于 item:', item);
								}

								return {
									...item,
									collectData: collectDataObj
								};
							});
							this.collectList = this.collectList.concat(result);
						}

						if (res.data.list.length < 10) {
							this.is_null = true;
						} else {
							this.pageNumber++;
						}
					}
				});
			}

		}
	};
</script>

<style lang="scss">
	page {
		background: #f5f6f7;
	}

	.content-box {
		padding: 10rpx 20rpx;

		.history-box {
			overflow-x: scroll;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.tags-box {
			white-space: nowrap;
			padding: 20rpx;
			width: 100%;
		}

		.tag-item {
			display: inline-block;
			padding: 0rpx 20rpx;
			border: 1rpx solid #FD7747;
			color: #FD7747;
			border-radius: 30rpx;
			margin-right: 15rpx;
		}
	}
</style>